<?php
	$siteId = $brands[0]['Brand']['piwik_id'];
?>
<script>
//$(document).ready(function(){
	var piwik_id = '<?php echo $siteId; ?>';
//});
</script>
<section id="main">
	<div class="row-fluid">
		<div class="span12">
			<hr class="main">
			<ul class="breadcrumbs">
				<li><?php echo $this->Html->link('Publisher Dashboard', '/pages/dashboard', array('class' => 'crumb')); ?> <span class="divider">|</span> </li>
				<li><?php echo $this->Html->link('Audience Technology', '#', array('class' => 'crumb active')); ?> <span class="divider">|</span> </li>
				<li><?php echo $this->Html->link('Audience by Location', '/pages/dashboard-location', array('class' => 'crumb')); ?> <span class="divider"> |</span> </li>
				<li><?php echo $this->Html->link('Audience in Realtime', '/pages/world-map', array('class' => 'crumb')); ?></li>
			</ul>
			<hr class="main">
		</div>
	</div>
	<div class="box bordered">
	<div class="box inner white">
	<div class="row-fluid padded10">
		<div class="section-title">What technology is used to access your site?</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="box bordered">
					<div class="box-header"> <i class="icon-bar-chart"></i> Audience by Browser </div>
					<div class="padded">
						<div class="row-fluid">
							<div class="span12">
								<div class="chart" id="pie-chart" style="width: 100%; height: 300px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="span6">
				<div class="box bordered">
					<div class="box-header"> <i class="icon-bar-chart"></i> Audience by Device </div>
					<div class="padded">
						<div class="row-fluid">
							<div class="span12">
								<div class="chart" id="donut-chart" style="width: 100%; height: 300px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="box bordered">
					<div class="box-header"> <i class="icon-bar-chart"></i> Audience by Resolution </div>
					<div class="padded">
						<div class="row-fluid">
							<div class="span12">
								<div class="chart" id="barchart" style="width: 100%; height: 300px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="span6">
				<div class="box bordered">
					<div class="box-header"> <i class="icon-bar-chart"></i> Mobile vs Desktop </div>
					<div class="padded">
						<div class="row-fluid">
							<div class="span12">
								<div class="chart" id="area-chart" style="width: 100%; height: 300px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12"> </div>
		</div>
	</div>
</section>
<?php echo $this->Html->script('plotchart.js', array('type' => 'text/javascript')); ?>
